<template>
    <Back title="新增科室信息" Add-Doctor-sty="adddoctor">
        <template #head>
            <div class="changeName">编辑套餐信息</div>
        </template>
        <template #table_body>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <!-- 医生姓名输入框 -->
                <el-form-item label="科室名称" prop="room">
                    <el-input style="width:240px;" size="small" placeholder="请输入内容" v-model="ruleForm.room"></el-input>
                </el-form-item>
                <!-- 下拉列表 -->
                <el-form-item label="所属院区" prop="danger">
                    <el-select style="width:240px;" size="small" v-model="ruleForm.danger" placeholder="请选择套餐类型">
                        <el-option label="东院区" value="东院区"></el-option>
                        <el-option label="南院区" value="南院区"></el-option>
                        <el-option label="西院区" value="西院区"></el-option>
                        <el-option label="北院区" value="北院区"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 下拉列表 -->
                <el-form-item label="上级科室" prop="beforeroom">
                    <el-select style="width:240px;" size="small" v-model="ruleForm.beforeroom" placeholder="请选择所属院区">
                        <el-option label="内科" value="内科"></el-option>
                        <el-option label="外科" value="外科"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 挂号费输入框 -->
                <el-form-item label="科室位置" prop="floor">
                    <el-input style="width:240px;" size="small" v-model="ruleForm.floor"></el-input>
                </el-form-item>

                <!-- 开关 -->
                <el-form-item label="科室状态" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item style="padding-left: 140px;">
                    <el-button size="small" style="width: 100px;" type="primary" @click="submitForm('ruleForm')">保存
                    </el-button>
                    <el-button size="small" style="width: 100px;" @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </template>
    </Back>
</template>
<script>
// 导入自定义组件
import Back from '@/components/Part/BackColor.vue'
import { getRoomDetail } from '@/api/Hospital/roomApi'
export default {
    data() {
        return {
            ruleForm: {
                room: '',
                danger: '',
                beforeroom: '',
                floor: '',
                delivery: '',
            },
            rules: {
                // 院区
                // 科室
                room: [
                    { required: true, message: '请选择科室', trigger: 'change' }
                ],
                danger: [
                    { required: true, message: '请选择院区', trigger: 'change' }
                ],
                beforeroom: [
                    { required: false, message: '请选择上级科室', trigger: 'change' }
                ],
                indagation: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
                delivery: [
                    { required: false, message: '请填写活动形式', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
        },
        // 图片上传事件
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },


        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.$router.back()
                    }, 1000);
                } else {

                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$message({
                message: '取消新增',
                type: 'info'
            });
            this.$router.back()
        }
    },
    // 挂载
    mounted() {
        const roomId = this.$route.query.roomId
        if (roomId) {
            getRoomDetail({ roomId: roomId }).then((res) => {
                this.ruleForm.room = res.data[0].room
                this.ruleForm.danger = "东院区"
                this.ruleForm.beforeroom = '内科'
                this.ruleForm.floor = res.data[0].floor
            })
        }
    },
    components: {
        Back,
    }
}
</script>
<style lang="scss">
[Add-Doctor-sty="adddoctor"] {
    .el-form-item__label {
        width: 140px;
        text-align: center;
    }

    .avatar-uploader {
        height: 80px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        background: #f2f2f2;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .el-form-item {
        display: flex;
        align-items: center;
    }

}
</style>
<style lang="scss" scoped>
.changeName {
    color: #006efe;
    font-size: 12px;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-bottom: 20px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>